<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>角色授权</title>
	<link rel="stylesheet" href="${request.contextPath}/plugins/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/font-awesome/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="${request.contextPath}/plugins/select2/select2.min.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/iCheck/skins/all.css">
	<link rel="stylesheet" href="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/animate.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/style.css">
	<link rel="stylesheet" href="${request.contextPath}/hadmin/css/common.css">
	<style>
		td > label{
			padding: 3px;
		}
	</style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-md-12">
				<div class="ibox">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="roleAddForm">
							<input type="hidden" value="${(sysRole.id)!}" name="roleId" id="roleId" />
							<table class="table table-hover">
								<#list treeMenuAccess as vo>
								<tr>
									<td width="135px">
										<label class="checkbox-inline i-checks" style="font-weight: 900;">
											<input name="mid" type="checkbox" ${(vo.allowAccess)?string('checked','')} value="${(vo.sysMenu.id)!}" class="checkbox-list">
											<i class="fa ${(vo.sysMenu.icon)!}"></i> ${(vo.sysMenu.menuName)!}
										</label>
									</td>
									<td>
									<#list vo.children as ch>
										<div style="margin-bottom:10px;" class="memu-select">
											<label class="checkbox-inline i-checks" style="font-weight: bold;">
												<input name="mid" type="checkbox" ${(ch.allowAccess)?string('checked','')} value="${(ch.sysMenu.id)!}" class="checkbox-menu">
												${(ch.sysMenu.menuName)!}
											</label>
											<#list ch.children as it>
												<label class="checkbox-inline i-checks" style="font-weight: normal;">
													<input name="mid" type="checkbox" ${(it.allowAccess)?string('checked','')} value="${(it.sysMenu.id)!}" class="checkbox-button">
													${(it.sysMenu.menuName)!}
												</label>&nbsp;
											</#list>
										</div>
									</#list>
									</td>
								</tr>
								</#list>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 通用js引入 -->
	<script src="${request.contextPath}/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="${request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="${request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script src="${request.contextPath}/plugins/iCheck/icheck.min.js"></script>
	<script src="${request.contextPath}/plugins/layer/layer.min.js"></script>
	<script src="${request.contextPath}/plugins/laydate/laydate.js"></script>
	<script src="${request.contextPath}/plugins/jquery-confirm/jquery-confirm.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/jquery.validate.min.js"></script>
	<script src="${request.contextPath}/plugins/validate/messages_zh.min.js"></script>
	<script src="${request.contextPath}/plugins/blockUI/jquery.blockUI.js"></script>
	<script src="${request.contextPath}/hadmin/js/content.js"></script>
	<script src="${request.contextPath}/hadmin/js/common.js?v=0.9"></script>
	<script>
		// icheck 初始化
		$('.i-checks').iCheck({
			checkboxClass: 'icheckbox_square-blue',
			radioClass: 'iradio_square-blue',
		});
		// 目录层级选中
		$(".checkbox-list").on('ifClicked', function() {
			$(this).parents('tr').find('.checkbox-menu').iCheck('check');
			$(this).parents('tr').find('.checkbox-button').iCheck('check');
		}).on('ifUnchecked', function() {
			$(this).parents('tr').find('.checkbox-menu').iCheck('uncheck');
			$(this).parents('tr').find('.checkbox-button').iCheck('uncheck');
		});
		// 菜单层级选中
		$(".checkbox-menu").on('ifClicked', function() {
			$(this).parents().parents().parents('tr').find('.checkbox-list').iCheck('check');
			$(this).parents('div.memu-select').find('.checkbox-button').iCheck('check');
		}).on('ifUnchecked', function() {
			var menuFlag = true;
			$(this).parents().parents().parents('tr').find('.checkbox-menu').each(function(){
				if(true == $(this).is(':checked')){
					menuFlag = false;
				}
			});
			if(menuFlag) {
				$(this).parents().parents().parents('tr').find('.checkbox-list').iCheck('uncheck');
			}
			$(this).parents('div.memu-select').find('.checkbox-button').iCheck('uncheck');
		});
		// 按钮层级选中
		$(".checkbox-button").on('ifClicked', function() {
			$(this).parents().parents().parents('tr').find('.checkbox-list').iCheck('check');
			$(this).parents('div.memu-select').find('.checkbox-menu').iCheck('check');
		}).on('ifUnchecked', function() {
			var buttonFlag = true;
			$(this).parents('div.memu-select').find('.checkbox-button').each(function(){
				if(true == $(this).is(':checked')){
					buttonFlag = false;
				}
			});
			if(buttonFlag) {
				$(this).parents('div.memu-select').find('.checkbox-menu').iCheck('uncheck');
			}
		});
		// 提交保存
		function submitHandler() {
			var ids = [];
			var roleId = $("#roleId").val();
			$("input[name='mid']:checkbox").each(function(){
				if(true == $(this).is(':checked')){
					ids.push($(this).val());
				}
			});
			// 逗号分隔菜单id
			var mid = "";
			if(ids.length > 0) {
				mid = ids.join(",")
			}
			saveInfo('${request.contextPath}/system/sysrole/doAuth', { roleId: roleId, mid: mid });
		}
	</script>
</body>
</html>
